@import "@assets/variables.scss";
@import "@assets/elementReset.scss";
html,
body,
// div,
// h1,
// h2,
// h3,
// h4,
// h5,
// h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
blockquote,
pre,
form,
fieldset
// table,
// th,
// td
 {
    border: none;
    font-family: "微软雅黑", "黑体", "宋体";
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}

div,
form {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    width: 100%;
}
a {
    text-decoration: none;
    color: $--color-primary;
}
input::-ms-clear {
    display: none;
}
input::-ms-reveal {
    display: none;
}
input {
    -webkit-appearance: none;
    margin: 0;
    outline: none;
    padding: 0;
}
input::-webkit-input-placeholder {
    color: #ccc;
}
input::-ms-input-placeholder {
    color: #ccc;
}
input::-moz-placeholder {
    color: #ccc;
}
input[type="submit"],
input[type="button"] {
    cursor: pointer;
}
button[disabled],
input[disabled] {
    cursor: default;
}
img {
    border: none;
}
ul,
ol,
li {
    list-style-type: none;
}
/*公共方法*/
.clear {
    clear: both;
}
.clearleft {
    clear: left;
}
.clearright {
    clear: right;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}
.cursor {
    cursor: pointer;
}
/*背景及色值表*/
.bg000 {
    background: #000;
}
.color000 {
    color: #000;
}
.color666 {
    color: #666;
}
.color999 {
    color: #999;
}
.baseColor {
	color: #275dad;
	cursor: pointer;
}
.p-0 {
    padding: 0;
}
.p-4 {
    padding: 4px;
}
.pl-4 {
    padding-left: 4px;
}
$count: 0;

@while $count <= 40 {
    .text-#{$count} {
        font-size: #{$count}px;
    }

    .w-#{$count} {
        width: percentage($count/100);
    }

    .p-#{$count} {
        padding: #{$count}px;
    }

    .px-#{$count} {
        padding-left: #{$count}px;
        padding-right: #{$count}px;
    }
    .py-#{$count} {
        padding-top: #{$count}px;
        padding-bottom: #{$count}px;
    }

    .pt-#{$count} {
        padding-top: #{$count}px;
    }
    .pr-#{$count} {
        padding-right: #{$count}px;
    }
    .pb-#{$count} {
        padding-bottom: #{$count}px;
    }
    .pl-#{$count} {
        padding-left: #{$count}px;
    }

    .m-#{$count} {
        margin: #{$count}px;
    }

    .mx-#{$count} {
        margin-left: #{$count}px;
        margin-right: #{$count}px;
    }
    .my-#{$count} {
        margin-top: #{$count}px;
        margin-bottom: #{$count}px;
    }

    .mt-#{$count} {
        margin-top: #{$count}px;
    }
    .mr-#{$count} {
        margin-right: #{$count}px;
    }
    .mb-#{$count} {
        margin-bottom: #{$count}px;
    }
    .ml-#{$count} {
        margin-left: #{$count}px;
    }

    .afterTop-#{$count} + .afterTop-#{$count} {
        margin-top: #{$count}px;
    }

    .afterLeft-#{$count} + .afterLeft-#{$count} {
        margin-left: #{$count}px;
    }

    $count: $count + 2;
}

.pt-p10 {
    padding-top: 10%;
}
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}
.vh-100 {
	height: 100vh;
}
.vw-100 {
	height: 100vw;
}

.d-ib {
    display: inline-block;
}

::-webkit-scrollbar {
    width: 3px;
    height: 8px;
    background-color: transparent;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
}

.light-little-scroll {
    overflow: auto;
    scroll-behavior:smooth;

    &::-webkit-scrollbar {
        width: 3px;
        height: 8px;
        background-color: transparent;
    }
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &:hover {
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: rgba(144, 147, 153, 0.3);
        }
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: transparent;
    }
}
.lightTextTip {
    background-color: #fff;

    .ant-tooltip-arrow::before {
        background-color: #fff;
    }

    .ant-tooltip-inner {
        background-color: #fff;
    }
}
.text-12 {
    font-size: 12px;
}

.blue-text-button {
    font-size: 14px;
    cursor: pointer;
    color: $--color-primary;
    // color: #6CBFBB;
    line-height: 20px;
    display: inline-block;
		margin: 0 4px;
}
.blue-text-button.disabled {
    cursor: no-drop;
    color: #C0C4CC;
		margin: 0 4px;
}
.blue-text-button:hover {
	text-decoration: underline;
}

.cut{
	display: inline-block;
	margin:0 5px;
	background-color:$--color-primary;
	min-height: 15px;
	height: 100%;
	width: 1px;
}

.selectOrUploadMediaFileContent {
    padding: 12px 12px;
    text-align: center;
    .itemButton {
        padding: 12px 64px;
        cursor: pointer;
        display: inline-block;

        &:hover {
            color: #2196f3;
        }

        & + .itemButton {
            border-left: 1px solid #aaa;
        }
    }
}

.full-absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.d-flex {
    display: flex;
}

.d-flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.ju-end {
    justify-content: flex-end;
}
.ju-center {
    justify-content: center;
}
.ju-between {
    justify-content: space-between;
}
.ju-around {
    justify-content: space-around;
}
.al-center {
    align-items: center;
}

.text-center {
    text-align: center;
}
.text-20 {
    font-size: 20px;
}
.color-666 {
    color: #666;
}
.font-weight-bold {
    font-weight: bold;
}

.black-background {
    background-color: #000;
}

.topOfAllDom {
    z-index: 99999999999999999999999999;
}

.px-16 {
    padding-left: 16px;
    padding-right: 16px;
}
.ml-8 {
    margin-left: 8px;
}
.ml-20 {
    margin-left: 20px;
}
.d-inline-block {
    display: inline-block;
}
.cursor-pointer {
    cursor: pointer;
}

.h-100.el-tabs.el-tabs--top {
    display: flex;
    flex-direction: column;
    .el-tabs__content {
        flex: 1;
        .el-tab-pane {
            height: 100%;
        }
    }
}

.input-click-select {
    display: inline-block;
    // width: 400px;
    border: 1px solid $--border-color-base;
    // height: 30px;
    padding: 0 12px;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    line-height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &.inform {
        width: 100%;
        box-sizing: border-box;
        padding: 0 12px;
        margin-bottom: 0;
        line-height: 25px;
        vertical-align: bottom;
    }

    &:hover {
        border-color: #3d85ff;
    }

    .closIcon {
        display: none;
        position: absolute;
        top: 8px;
        right: 8px;
        color: #999;
        cursor: pointer;
    }

    &:hover > .closIcon {
        display: inline-block;
    }

    &.disabled {
        cursor: not-allowed;
    }
}
.relative {
    position: relative;
}
.bg-color-red {
    background-color: #ff225569;
}
.bg-color-orange {
    background-color: #ff572247;
}
.color-primary {
    color: $--color-primary;
}
.color-red {
    color: #f56c6c;
}
.color-green {
    color: #3d8d3d;
}
.h-auto {
    height: auto;
}
.text-b {
    font-weight: bold;
}

.formTabs {
    &.el-tabs--top,
    &.el-tabs--bottom {
        .el-tabs__item {
            &.is-top:nth-child(2),
            &.is-bottom:nth-child(2),
            &.is-top:nth-child(2),
            &.is-bottom:nth-child(2) {
                padding-left: 20px;
            }

            &.is-top:last-child,
            &.is-bottom:last-child,
            &.is-top:last-child,
            &.is-bottom:last-child {
                padding-right: 20px;
            }
        }
    }
}
.border-color-gray {
    border: 1px solid #d9d9d9;
}

// $robot-color-active: rgb(141, 158, 235);
$robot-color-active: $--color-primary;
$robot-color-error: rgb(228, 38, 70);
$robot-color-success: #69b169;
$robot-color-warning: #e6c218; // #f6da52

@mixin active_card {
    box-shadow: 0 2px 12px 0 $robot-color-active !important;
    color: $robot-color-active;
    border-color: $robot-color-active;
}

@mixin error_card {
    // box-shadow: 0 2px 12px 0 $robot-color-error !important;
    // color: #fff;
    // background-color: $robot-color-error;
    color: $robot-color-error;
    background-color: #fff;
    font-weight: bold;
}
@mixin success_card {
    // box-shadow: 0 2px 12px 0 $robot-color-success !important;
    color: #fff;
    background-color: $robot-color-success;
}
@mixin warning_card {
    // box-shadow: 0 2px 12px 0 $robot-color-success !important;
    // color: #82848a;
    // background-color: $robot-color-warning;
    color: $robot-color-warning;
    background-color: #fff;
    font-weight: bold;
}
@mixin tip_tag {
    &::before {
        position: absolute;
        top: 3px;
        right: 3px;
        content: "\e7a3";
        font-family: element-icons !important;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
    }
}
.se_card {
    position: relative;
    border-width: 3px !important;
    &:hover {
        @include active_card;
    }
    &.active {
        @include active_card;
    }
    &.error {
        @include error_card;
        @include tip_tag;
    }
    &.success {
        @include success_card;
        @include tip_tag;
    }
    &.warning {
        @include warning_card;
        @include tip_tag;
    }

    .el-card__body {
        padding: 10px 20px !important;
    }

}

.algin-center {
    text-align: center;
}
.circle_tag {
    border: 1px solid #e6c218;
    border-radius: 50%;
    color: #e6c218;
    margin: 0 3px;
}
.showMoreRows-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1; //行数
    -webkit-box-orient: vertical;
}
.showMoreRows-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; //行数
    -webkit-box-orient: vertical;
}
.workTypePop {
    .el-cascader-menu {
        .el-cascader-menu__wrap {
            height: 430px;
        }
    }
}

.hover-boder-green {
    &:hover {
        // border: 1px solid #449d44;
        box-shadow: 1px 1px 1px 0 #449d44, -1px -1px 1px 0 #449d44;
    }
}
.hide_label_check {
    .el-checkbox__label {
        display: none;
    }
    .el-radio__label {
        display: none;
    }
}

.arrowSelected {
    font-family: "element-icons" !important;
    background: linear-gradient(-45deg, #0b69ff 15px, transparent 0);
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 2px 12px 0 rgb(141, 158, 235);

    &:after {
        color: #fff;
        content: "\e6da";
        clear: both;
        display: block;
        height: 15px;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
	overflow: auto;
}
.dialogPoint{
    line-height: 15px;
    height: 13px;
    padding-left: 10px;
    border-left: 4px solid #005FB3;
}
.el-form .el-form-item__label {
    display: -webkit-box;
    -webkit-line-clamp: 1; //行数
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #303030;
}
.text-bold {
	font-weight: bold;
  padding-left: 10px;
	color: #666;
}
.border-top{
	border-top: 1px solid #e2e2e2;
}
.panel-title {
    color: #333;
    height: 35px;
    line-height: 35px;
    font-weight: 600;
    text-align: left;
    padding-left: 10px;
}
.panel-header {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-weight: 600;
	text-align: left;
	text-indent: 10px;
	border-bottom: 1px solid #e2e2e2;
}
.back_img_contain {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}
.bg-fff{
	background-color: #fff;
}
.qualityCheckDetail .el-input.is-disabled .el-input__inner{
	color: #000;
}

.form_title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 12px;
    margin-top: 8px;
    border-radius: 16px;
    .text {
        position: relative;
        padding-left: 16px;
        &::before {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            display: block;
            content: " ";
            width: 4px;
            height: 100%;
            background: $--color-primary;
        }
    }
}
.icon_item {
    cursor: pointer;
    &:hover {
        color: $--color-primary;
    }
}
.custom_notify {
    width: 200px;
}